<template>
  <div class="list" ref="warper">
    <div>
      <div class="area">
        <div class="title border-topbottom">所在城市</div>
        <div class="btn-list">
          <div class="btn-warper">
            <button class="btn">北京</button>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="btn-list">
          <div class="btn-warper" v-for="item of hot" :key="item.id">
            <button class="btn">{{item.name}}</button>
          </div>
        </div>
      </div>
      <div
        class="area"
        v-for="(item, key) of cities"
        :key="key"
        :ref="key"
      >
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
          <div
            class="city-font border-bottom"
            v-for="innerItem of item"
            :key="innerItem.id"
          >{{innerItem.name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//  在遍历的过程中出现了问题,问题在于搞不清楚循环的对象,错把v-for放在标题部分,其实标题部分和list部分同级所以导致同级无法获取到item该
//  循环一整个area区域
//  传对象的时候必须知道到底传的是什么值,如果是对象那么在传数据的时候应该先设置空对象{}
//  当存在双层数组那么第一个需要获得的应该是对象,接下来子对象下的才是数组
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  mounted () {
    this.scroll = new Bscroll(this.$refs.warper)
  },
  props: {
    cities: Object,
    hot: Array,
    letter: String
  },
  watch: {
    letter () {
      const element = this.$refs[this.letter][0]
      this.scroll.scrollToElement(element)
    }
  }
}
/*
1.做项目必须先整理思路了解项目的结构才动手
2.注意border中的都是以class的形式赋予样式的同时要注意伪元素在class中的使用
3.当存在float浮动的时候，需要在父元素使用overflow=hidden 解决
	这里涉及到一个概念BFC，非BFC会忽略float子元素的高度值，所以导致遇到的问题，而设置其属性overflow:hidden之后就触发了父元素的BFC，所以能自适应内容的高度

4.在准备访问class下 的class的时候，需要在写出2给class，一个作为父class，内容就是子class
5.当页面list没有设置display：hidden 的时候，多出来的部分会撑出去，如果给list设置背景颜色会发现下面部分的颜色是无法看到的,此时的list没有背景颜色
6.使用better-scroll插件的时候
	1.安装 2.在script中import Bscroll from 'better-scroll' 3.设置生命周期函数， mounted () {
  	this.scroll = new Bscroll(this.$refs.warper)  空格里的是dom节点。ref可以获取节点$refs.ref可以接收数据.
  }
*/
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.border-topbottom
		&:before
			border-color: #ccc
		&:after
			border-color: #ccc
	.border-bottom
		&:before
			border-color: #ccc
	.list
		overflow: hidden
		position:absolute
		left: 0
		top: 1.82rem
		right: 0
		bottom: 0
		.title
			padding: .02rem .1rem
			background: #ccc
			line-height: .44rem
			font-size: .32rem
		.btn-list
			overflow: hidden
			padding: .1rem
			.btn-warper
				margin-top:-.4rem
				margin-right:.15rem
				float: left
				width: 30%
				.btn
					background: #fff
					width:100%
					padding:.1rem
					margin: .1rem 0
					text-align: center
					border: .02rem solid #009340
					border-radius: .06rem
		.item-list
			.city-font
					font-size: .32rem
					padding: .1rem 0
</style>
